<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'录音/音频'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<template v-if="((((recording == false)) && ((playing == false)))) && ((hasRecord == false))">
				<onekit-view onekit-class="page-body-time">
					<onekit-text onekit-class="time-big">{{formatedRecordTime}}</onekit-text>
				</onekit-view>
				<onekit-view onekit-class="page-body-buttons">
					<onekit-view onekit-class="page-body-button"></onekit-view>
					<onekit-view onekit-class="page-body-button" @click.native="startRecord">
						<onekit-image src="/image/record.png"></onekit-image>
					</onekit-view>
					<onekit-view onekit-class="page-body-button"></onekit-view>
				</onekit-view>
			</template>
			<template v-if="recording == true">
				<onekit-view onekit-class="page-body-time">
					<onekit-text onekit-class="time-big">{{formatedRecordTime}}</onekit-text>
				</onekit-view>
				<onekit-view onekit-class="page-body-buttons">
					<onekit-view onekit-class="page-body-button"></onekit-view>
					<onekit-view onekit-class="page-body-button" @click.native="stopRecord">
						<onekit-view onekit-class="button-stop-record"></onekit-view>
					</onekit-view>
					<onekit-view onekit-class="page-body-button"></onekit-view>
				</onekit-view>
			</template>
			<template v-if="((hasRecord == true)) && ((playing == false))">
				<onekit-view onekit-class="page-body-time">
					<onekit-text onekit-class="time-big">{{formatedPlayTime}}</onekit-text>
					<onekit-text onekit-class="time-small">{{formatedRecordTime}}</onekit-text>
				</onekit-view>
				<onekit-view onekit-class="page-body-buttons">
					<onekit-view onekit-class="page-body-button"></onekit-view>
					<onekit-view onekit-class="page-body-button" @click.native="playVoice">
						<onekit-image src="/image/play.png"></onekit-image>
					</onekit-view>
					<onekit-view onekit-class="page-body-button" @click.native="clear">
						<onekit-image src="/image/trash.png"></onekit-image>
					</onekit-view>
				</onekit-view>
			</template>
			<template v-if="((hasRecord == true)) && ((playing == true))">
				<onekit-view onekit-class="page-body-time">
					<onekit-text onekit-class="time-big">{{formatedPlayTime}}</onekit-text>
					<onekit-text onekit-class="time-small">{{formatedRecordTime}}</onekit-text>
				</onekit-view>
				<onekit-view onekit-class="page-body-buttons">
					<onekit-view onekit-class="page-body-button" @click.native="stopVoice">
						<onekit-image src="/image/stop.png"></onekit-image>
					</onekit-view>
					<onekit-view onekit-class="page-body-button" @click.native="pauseVoice">
						<onekit-image src="/image/pause.png"></onekit-image>
					</onekit-view>
					<onekit-view onekit-class="page-body-button" @click.native="clear">
						<onekit-image src="/image/trash.png"></onekit-image>
					</onekit-view>
				</onekit-view>
			</template>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "录音",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
const util = require('../../../util/util.js');
let playTimeInterval;
let recordTimeInterval;
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
export default Page(ONEKIT_JSON,["recording","playing","hasRecord","formatedRecordTime","formatedPlayTime"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'录音',
        "path":'packageAPI/pages/voice/voice'
};
    },
    "data":{
        "recording":false,
        "playing":false,
        "hasRecord":false,
        "recordTime":0,
        "playTime":0,
        "formatedRecordTime":'00:00:00',
        "formatedPlayTime":'00:00:00'
},
    "onHide"(){
      if(this.data.playing)
      {
        this.stopVoice();
      }
else
      if(this.data.recording)
        {
          this.stopRecordUnexpectedly();
        };
    },
    "onLoad"(){
      const that = this;
      recorderManager.onStart(()=>{
      console.log('recorderManage: onStart');
      recordTimeInterval = setInterval(()=>{
        const recordTime = that.data.recordTime += 1;
        that.setData({
            "formatedRecordTime":util.formatTime(that.data.recordTime),
            recordTime
});
      },1000);
    });
      recorderManager.onStop((res)=>{
      console.log('recorderManage: onStop');
      that.setData({
          "hasRecord":true,
          "recording":false,
          "tempFilePath":res.tempFilePath,
          "formatedPlayTime":util.formatTime(that.data.playTime)
});
      clearInterval(recordTimeInterval);
    });
      innerAudioContext.onPlay(()=>{
      console.log('innerAudioContext: onPlay');
      playTimeInterval = setInterval(()=>{
        const playTime = that.data.playTime + 1;
        if(that.data.playTime == that.data.recordTime)
          {
            that.stopVoice();
          }
else
          {
            console.log('update playTime',playTime);
            that.setData({
                "formatedPlayTime":util.formatTime(playTime),
                playTime
});
          };
      },1000);
    });
      innerAudioContext.onStop(()=>{
    });
    },
    "startRecord"(){
      this.setData({
        "recording":true
});
      const options = {
        "duration":10000,
        "sampleRate":44100,
        "numberOfChannels":1,
        "encodeBitRate":192000,
        "format":'aac',
        "frameSize":50
};
      recorderManager.start(options);
    },
    "stopRecord"(){
      recorderManager.stop();
    },
    "stopRecordUnexpectedly"(){
      const that = this;
      wx.stopRecord({
        "success"(){
          console.log('stop record success');
          clearInterval(recordTimeInterval);
          that.setData({
            "recording":false,
            "hasRecord":false,
            "recordTime":0,
            "formatedRecordTime":util.formatTime(0)
});
        }
});
    },
    "playVoice"(){
      innerAudioContext.src = this.data.tempFilePath;
      this.setData({
        "playing":true
},()=>{innerAudioContext.play()});
    },
    "pauseVoice"(){
      clearInterval(playTimeInterval);
      innerAudioContext.pause();
      this.setData({
        "playing":false
});
    },
    "stopVoice"(){
      clearInterval(playTimeInterval);
      innerAudioContext.stop();
      this.setData({
        "playing":false,
        "formatedPlayTime":util.formatTime(0),
        "playTime":0
});
    },
    "clear"(){
      clearInterval(playTimeInterval);
      innerAudioContext.stop();
      this.setData({
        "playing":false,
        "hasRecord":false,
        "tempFilePath":'',
        "formatedRecordTime":util.formatTime(0),
        "recordTime":0,
        "playTime":0
});
    }
});

</script>
<style 
 lang="css">
.onekit-image {
  width: 75px ;
  height: 75px ;
}
.page-body-wrapper {
  justify-content: space-between ;
  flex-grow: 1 ;
  margin-bottom: 150px ;
}
.page-body-time {
  display: flex ;
  flex-direction: column ;
  align-items: center ;
}
.time-big {
  font-size: 30px ;
  margin: 10px ;
}
.time-small {
  font-size: 15px ;
}
.page-body-buttons {
  margin-top: 30px ;
  display: flex ;
  justify-content: space-around ;
}
.page-body-button {
  width: 225px ;
  text-align: center ;
}
.button-stop-record {
  width: 15px ;
  height: 15px ;
  border: 10px solid #fff ;
  background-color: #f55c23 ;
  border-radius: 115px ;
  margin: 0 auto ;
}
</style>